// 创建一个虚拟的，分类数据
let sortData = [
    {
        cont: '全部',
        txt: '身份证验证'
    },
    {
        cont: '生活服务',
        txt: '银行卡'
    },
    {
        cont: '金融科技',
        txt: '科技发展'
    },
    {
        cont: '交通地理',
        txt: '天气'
    },
    {
        cont: '充值缴费',
        txt: '天然气'
    },
    {
        cont: '数据智能',
        txt: 'AI'
    },
    {
        cont: '企业工商',
        txt: '企业开发'
    },
    {
        cont: '应用开发',
        txt: '前端'
    },
    {
        cont: '电子商务',
        txt: '美工'
    },
    {
        cont: '吃喝玩乐',
        txt: '火锅'
    },
]
// 获取父容器
let sortBtn = document.querySelector('.sort_btn')
let str = ''
sortData.forEach(function (open, i) {
    str += `<button txt='${sortData[i].txt}'>${sortData[i].cont}</button>`

})
sortBtn.innerHTML = str

// 创建点击事件  
// 给父容器创建点击事件
let subText = document.querySelector('.substance .substance_text')
let subInput = document.querySelector('.substance .form .substance_inp')
sortBtn.addEventListener('click', function (e) {
    if (e.target.nodeName == "BUTTON") {
        subText.textContent = e.target.textContent
        subInput.placeholder = e.target.getAttribute('txt')
    }
})



let substanceData = [
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第一页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第一页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第一页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第一页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第一页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第一页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第一页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第一页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第一页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第一页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第二页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第二页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第二页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第二页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第二页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第二页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第二页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第二页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第二页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第二页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第三页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第三页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第三页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第三页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第三页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第三页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第三页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第三页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第三页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第三页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第四页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第四页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第四页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第四页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第四页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第四页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第四页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第四页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第四页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第四页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第五页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第五页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第五页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第五页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第五页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第五页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第五页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第五页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第五页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第五页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第六页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第六页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第六页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第六页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第六页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第六页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第六页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第六页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第六页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第六页2021出行疫情政策指南', pic: '0.3360', },
    ],
    [
        { enterprise: false, src: './images/API_01.jpg', name: '第七页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第七页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第七页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第七页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第七页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: false, src: './images/API_01.jpg', name: '第七页2021出行疫情政策指南', pic: 0, },
        { enterprise: true, src: './images/API_02.jpg', name: '第七页身份证实名认证', pic: '0.2000', },
        { enterprise: false, src: './images/API_03.jpg', name: '第七页银行卡四元素验证', pic: 0, },
        { enterprise: true, src: './images/API_04.jpg', name: '第七页2021出行疫情政策指南', pic: '0.3360', },
        { enterprise: true, src: './images/API_05.jpg', name: '第七页2021出行疫情政策指南', pic: '0.3360', },
    ],
    ]
let subsCont = document.querySelector('.substance_cont')
function change(arr) {
    
    // console.log(subsCont);
    let st = ''
    for (let i = 0; i < arr.length; i++) {
        // console.log(substanceData[i]);
        if (arr[i].enterprise) {
            st += ` <li it=${i+1}><span class="substance_cont_img">企业专用</span>`
        } else {
            st += `<li>`
        }
        st += `
        <a href="./API详情.html"><img src="${arr[i].src}" alt=""></a>
        <p>${arr[i].name}</p>
        <span class=${arr[i].pic == 0 ? "" : "substance_cont_wen"}>${arr[i].pic == 0 ? '免费' : arr[i].pic}</span>
        <button type="button">提交数据</button> </li>`
        
    }
    subsCont.innerHTML = st
}





// 数组里面有多少项  我就创建多少页
let subPage= document.querySelector('.substance_page')
let pageLower=document.querySelector('.page_lower')
function PageNumber(){
    for(let i=0;i<substanceData.length;i++){
    // console.log(substanceData[i]);
    // 创建节点 创建
    let span=document.createElement('span')
    span.textContent=i+1
    span.setAttribute('it',i+1)
    subPage.insertBefore(span,pageLower)

}
}
PageNumber()
// 给父容器创建点击事件
//  console.log(subPage.children);
function SwitchPages(){
    let item=1
    // 默认第一页
    change(substanceData[item-1])
    subPage.children[item].classList.add('page_bg')
    subPage.addEventListener('click',function(e){
        // console.dir(e.target);
        
        subPage.children[item].classList.remove('page_bg')
        if(e.target.nodeName=="SPAN"){
            e.target.classList.add('page_bg')
        item=e.target.getAttribute('it')
        change(substanceData[item-1])
        }else if(e.target.className=="page_upper"){
            subPage.children[item].classList.remove('page_bg')
            item--
            if(item<=1){
                item=1
            }
            subPage.children[item].classList.add('page_bg')
            change(substanceData[item-1])
        }else if(e.target.className=="page_lower"){
            subPage.children[item].classList.remove('page_bg')
            item++
            if(item>=substanceData.length){
                item=substanceData.length
            }
            subPage.children[item].classList.add('page_bg')
            change(substanceData[item-1])
        }
        // console.dir(e.target);
    })
}


// 创建移入移出事件
//  鼠标移入事件

// let it=0
let but =null

subsCont.addEventListener('mouseover',function(e){
    
    if(e.target.nodeName=='LI'){
        e.target.className='substance_li'
        but= e.target.lastChild.previousSibling
       but.className='substance_cont_btn'
    }else if(e.target.parentNode.nodeName=='LI'){
        e.target.parentNode.className='substance_li'
        but= e.target.parentNode.lastChild.previousSibling
       but.className='substance_cont_btn'
    }
})
subsCont.addEventListener('mouseout',function(e){
    // console.log(e.target);
    if(e.target.nodeName=='LI'){
        e.target.className='substance_li1'
        but= e.target.lastChild.previousSibling
        but.className='substance_cont_btn1'
    }else if(e.target.parentNode.nodeName=='LI'){
        e.target.parentNode.className='substance_li1'
        but= e.target.parentNode.lastChild.previousSibling
        but.className='substance_cont_btn1'
    }
})




SwitchPages()
// 模态框中登录方式的切换
function switchLogin(){
    let modalTitle = document.querySelectorAll('.modal_box_title>p')
    let mod=document.querySelectorAll('.modal_box_cont>div')
    modalTitle.forEach(function(open,i){
        open.addEventListener('click',function(){
            modalTitle.forEach(function(open,i){
                open.classList.remove('modal_box_tit_col')
                mod[i].classList.remove('modal_box_modal_show')
            })
            open.classList.add('modal_box_tit_col')
            mod[i].classList.add('modal_box_modal_show')
        })
    })
}
switchLogin()
// 模态框显示
function modalDisplay(){
// 获取模态框 
let modal=document.querySelector('.modal')
subsCont.addEventListener('click',function(e){
    if(e.target.nodeName=='BUTTON'){
        modal.classList.add('modal_show')
    }
})
let close =document.querySelector('.modal_close')
close.addEventListener('click',function(){
    modal.classList.remove('modal_show')
})
// 点击旁边的半透明的背景也关闭模态框
modal.addEventListener('click',function(e){
if(e.target.className=="modal modal_show"){
    e.target.className='modal'
}
})
}
modalDisplay()

























